<!-- 级别调整弹出框 -->

<!-- 客户订单-生产者订单 -->
<template>
  <div>
    <a-modal
      v-model:visible="dialogVisible"
      @cancel="handleCancel"
      :on-before-ok="handleBeforeOk"
      unmountOnClose
    >
      <template #title>级别调整 </template>

      <div>
        <a-space
          direction="vertical"
          size="large"
          :style="{
            marginBottom: '20px',
          }"
        >
          <div>
            <span>客户原级别</span>
            <div>
              <a-input
                :style="{
                  width: '320px',
                }"
                :placeholder="preLevel"
                disabled
              ></a-input>
            </div>
          </div>
        </a-space>
        <a-space direction="vertical" size="large">
          <div>
            <span>客户现级别</span>
            <div>
              <a-select
                v-model="currLevel"
                :style="{ width: '320px' }"
                placeholder="请选择级别"
              >
                <a-option
                  v-for="item in levelList"
                  :value="item.id"
                  :key="item.id"
                >
                  {{ item.name }}
                </a-option>
              </a-select>
            </div>
          </div>
        </a-space>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref, computed, watchEffect } from 'vue';
  import { GetClientSettingInfo } from '@/api/order-management/client-management/base-setting/index';

  const props = withDefaults(
    //参数说明
    defineProps<{
      visible: boolean;
      preLevel: string; // 原本的等级
    }>(),
    {
      visible: false,
    }
  );

  const emits = defineEmits(['update:visible', 'changeLevelEmit']);

  const dialogVisible = computed({
    get() {
      return props.visible;
    },
    set(visible: boolean) {
      emits('update:visible', visible);
    },
  });

  // level类型
  type level = {
    id: number; // id
    name: string; // 名字
  };

  const levelList = ref<level[]>([]);

  // 获取级别数据
  const getLevelData = async () => {
    try {
      const { customerLevel } = await GetClientSettingInfo();
      levelList.value = customerLevel;
    } catch (err: unknown) {
      console.log(err);
    }
  };

  let currLevel = ref(null); // 储存当前的级别名称
  // 点击确定
  const handleBeforeOk = async () => {
    emits('changeLevelEmit', currLevel.value);
  };

  // 取消
  const handleCancel = () => {
    dialogVisible.value = false;
  };

  watchEffect(() => {
    if (dialogVisible.value) {
      currLevel.value = null;
      getLevelData();
    }
  });
</script>

<style scoped lang="less"></style>
